<template>
  <basic-container>
    <el-tabs v-model="tabActiveName" @tab-click="handleClick">
      <el-tab-pane label="融创员工审核" name="first">
        <avue-crud :option="option"
                   :data="data"
                   ref="crud"
                   v-model="form"
                   :table-loading="loading"
                   :permission="permissionList"
                   :page="page"
                   @refresh-change="refreshChange"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @on-load="onLoad"
        >
          <!-- 自定义添加搜索条件  按日期搜索  -->
          <template slot="search">

            <el-col  :span="12">
              <el-form-item label="审核操作时间"label-width="100px" style="display: inline-block;width: 50%;">
                <el-date-picker placeholder="开始时间" value-format="yyyy-MM-dd" v-model="beginOperationTime" type="date" size="small">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="至"　label-width="40px" style="display: inline-block;width: 50%;">
                <el-date-picker placeholder="结束日期" @change="getTime" value-format="yyyy-MM-dd" v-model="endOperationTime" type="date" size="small">
                </el-date-picker>
              </el-form-item>
            </el-col>

          </template>
          <!-- 审核按钮  -->
          <template slot-scope="{row}"
                    slot="menu">
            <el-button type="primary"
                       size="small"
                       plain
                       v-if="row.status==0"
                       @click.stop="getDetail(row)" v-has="'/mall-cloud-system/groupLeader/auditGroupLeader'">审核</el-button>

            <el-button type="primary"
                       size="small"
                       plain
                       v-if="row.status==-1 || row.status==1"
                       @click.stop="getDetail(row)" v-has="'/mall-cloud-system/groupLeader/detail'">查看</el-button>
          </template>
        </avue-crud>
      </el-tab-pane>
      <el-tab-pane label="带货达人审核" name="second">
        <avue-crud :option="option2"
                   :data="data2"
                   ref="crud2"
                   v-model="form2"
                   :table-loading="loading2"
                   :permission="permissionList"

                   :page="page2"
                   @refresh-change="refreshChange2"
                   @search-change="searchChange2"
                   @search-reset="searchReset2"
                   @current-change="currentChange2"
                   @size-change="sizeChange2"
                   @on-load="onLoad2"
        >
          <!-- 自定义添加搜索条件  按日期搜索  -->
          <template slot="search">
            <el-col  style="margin-top: 0.7rem;width: 80px;">
              <span>地区：</span>
            </el-col>
            <el-col  :span="5" style="margin-right: 1rem;margin-top: 0.4rem;">
              <el-select size="small" v-model="areaId" placeholder="省份" @change="changeArea">
                <el-option v-for="item in areas" :key="item.id" :label="item.area_name" :value="item.id">
                </el-option>
              </el-select>
            </el-col>
            <el-col  :span="5" style="margin-right: 1rem; margin-top: 0.4rem;">
              <el-select size="small" v-model="cityId" placeholder="城市">
                <el-option v-for="item in citys" :key="item.id" :label="item.area_name" :value="item.id">
                </el-option>
              </el-select>
            </el-col>
            <el-col  :span="12">
              <el-form-item label="审核操作时间"label-width="100px" style="display: inline-block;width: 50%;">
                <el-date-picker placeholder="开始时间" value-format="yyyy-MM-dd" v-model="beginOperationTime" type="date" size="small">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="至"　label-width="40px" style="display: inline-block;width: 50%;">
                <el-date-picker placeholder="结束日期" @change="getTime" value-format="yyyy-MM-dd" v-model="endOperationTime" type="date" size="small">
                </el-date-picker>
              </el-form-item>
            </el-col>

          </template>
          <!-- 审核按钮  -->
          <template slot-scope="{row}"
                    slot="menu">
            <el-button type="primary"
                       size="small"
                       plain
                       v-if="row.status==0"
                       @click.stop="getDetail(row)" v-has="'/mall-cloud-system/groupLeader/auditGroupLeader'">审核</el-button>

            <el-button type="primary"
                       size="small"
                       plain
                       v-if="row.status==-1 || row.status==1"
                       @click.stop="getDetail(row)" v-has="'/mall-cloud-system/groupLeader/detail'">查看</el-button>
          </template>
        </avue-crud>
      </el-tab-pane>
    </el-tabs>



    <el-drawer title="团长注册详情" :visible.sync="dialogTableVisible" size="70%">
      <avue-form ref="obj"
                 v-model="obj"
                 :option="optionView">
        <template slot="menuForm">
          <el-button type="primary" size="mini"  v-if="obj.newStatus==0" :loading="loadBtn" @click="commitCheck(obj.id,obj.status,obj.refuseReason)" v-has="'/mall-cloud-system/groupLeader/auditGroupLeader'">提 交</el-button>
          <el-button size="mini" @click="cancel(obj.newStatus)">取 消</el-button>
        </template>
      </avue-form>
    </el-drawer>

  </basic-container>
</template>

<script>
    import {
        getList,
        getDetail,

        auditGroupLeader
    } from "@/api/base/member/groupLeaderMgr";
    import {

      getAreaListByLevel,

    } from "@/api/admin/area";
    import { mapGetters } from "vuex";
    var Dict = JSON.parse(localStorage.getItem('mall-dictionary')).content;
    var CHECKDIC = [
   {
        label: '审核拒绝',
        value: -1,
    }, {
        label: '审核通过',
        value: 1,
    }]

    var WITH_STATUS = [
      {
        label: '待审核',
        value: 0,
      }, {
        label: '审核通过',
        value: 1,
      },{
        label: '审核拒绝',
        value: -1,
      }
    ]
    export default {
        data () {
            return {

                tabActiveName: 'first', //tab页切换
                beginOperationTime: '',
                endOperationTime: '',
                areaId:null,
                cityId:null,
                areas: [],
                citys: [],
                loadBtn:false,
                deleteList: [], //全选的删除
                form: {},
                form2: {},
                obj:{},
                arroyAllDict:{},
                query: {},
                query2: {},
                loading: true,
                loading2: true,
                rolesTree: [],
                rolesKeys: [],
                box: false,
                dialogTableVisible: false,
                page: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                page2: {
                  pageSize: 10,
                  currentPage: 1,
                  total: 0
                },
                option: {
                    //title:'提现申请记录',
                    align: 'center',
                    size: 'mini',
                    tip: false,
                    border: true,
                    index: false,
                    selection: false,
                    viewBtn: false,
                    delBtn: false,
                    addBtn: false,
                    editBtn: false,
                    rowKey: 'id',
                    height: 'auto',
                    // calcHeight: 380,
                    menuWidth: 100,
                    searchMenuSpan:6,
                    column: [
                        {
                            label: "姓名",
                            prop: "name",
                            fixed: true,
                            search: true,
                        },
                        {
                            label: "城市",
                            prop: "city",
                            hide:false
                        },
                        //暂时隐藏掉
                        // {
                        //     label: "服务费",
                        //     prop: "serviceAmount",
                        //     fixed: true,
                        // },
                        {
                            label: "项目",
                            prop: "project",

                        },
                        {
                            label: "工号",
                            prop: "jobNumber",
                            search: true,
                        },
                        {
                            label: "状态",
                            prop: "status",
                            search: true,
                            type: 'select',
                            width:70,
                            dicData: WITH_STATUS,
                        },
                        {
                            label: "审核人",
                            prop: "auditUser",
                        },
                        {
                            label: "审核时间",
                            prop: "auditTime",
                        },

                    ]
                },


                option2: {
                //title:'提现申请记录',
                align: 'center',
                size: 'mini',
                tip: false,
                border: true,
                index: false,
                selection: false,
                viewBtn: false,
                delBtn: false,
                addBtn: false,
                editBtn: false,
                rowKey: 'id',
                height: 'auto',
                // calcHeight: 380,
                menuWidth: 100,
                searchMenuSpan:6,
                column: [
                  {
                    label: "姓名",
                    prop: "name",
                    fixed: true,
                    search: true,

                  },
                  {
                    label: "地区",
                    prop: "address",
                    hide:false
                    // width: 70
                  },
                  {
                    label: "状态",
                    prop: "status",
                    search: true,
                    type: 'select',
                    width:70,
                    dicData: WITH_STATUS,
                  },
                  {
                    label: "审核人",
                    prop: "auditUser",

                  },
                  {
                    label: "审核时间",
                    prop: "auditTime",

                  },

                ],
              },


                optionView: {
                    size: "samll",
                    mock: false,
                    submitBtn: false,
                    emptyBtn: false,
                    menuPostion: 'center',
                    labelWidth: '100',
                    group:[
                        {
                            label: '基本信息',
                            prop: 'group0',
                            column: [
                                {
                                    label: "姓名",
                                    prop: "name",
                                    fixed: true,
                                    disabled:true,
                                    display:true,
                                },{
                                label: "身份证号",
                                prop: "idCard",
                                fixed: true,
                                disabled:true,
                                display:true,
                              },
                                {
                                    label: "联系电话",
                                    prop: "mobile",
                                    fixed: true,
                                    disabled:true,
                                    display:true,
                                },
                                {
                                    label: "微信号",
                                    prop: "wxNumber",
                                    fixed: true,
                                    disabled:true,
                                },
                                {
                                    label: "工号",
                                    prop: "jobNumber",
                                    fixed: true,
                                    disabled:true,

                                },

                                {
                                    label: "区域",
                                    prop: "area",
                                    fixed: true,
                                    disabled:true,
                                    display:true,
                                },
                                {
                                    label: "城市",
                                    prop: "city",
                                    fixed: true,
                                    disabled:true,
                                    display:true,
                                },
                                {
                                  label: "项目",
                                  prop: "project",
                                  disabled:true,
                                  fixed: true,
                                  display:true,
                                },
                              {
                                label: "地址",
                                prop: "address",
                                disabled:true,
                                fixed: true,
                                display:true,
                              },
                              {
                                label: "邀请人手机号",
                                prop: "inviterMobile",
                                disabled:true,
                                fixed: true,
                                display:true,
                              },

                              {
                                label: "拒绝原因",
                                prop: "refuseReason",
                                type: 'textarea',
                                disabled:true,
                                fixed: true,
                                value:false,
                                display:true,
                              },
                            ]
                        },
                        {
                            label: '审核',
                            prop: 'group1',
                            column: [
                                {
                                    label: "审核",
                                    prop: "status",
                                    type: 'radio',
                                    row: true,
                                    display:true,
                                    dicData: CHECKDIC,
                                    rules: [{
                                        required: true,
                                        message: "请选择审核选项",
                                        trigger: "blur"
                                    }],
                                },
                                {
                                    label: "拒绝原因",
                                    prop: "refuseReason",
                                    type: 'textarea',
                                    display:true,
                                    fixed: true,
                                    value:false,
                                    rules: [{
                                        required: true,
                                        message: "请输入拒绝原因",
                                        trigger: "blur"
                                    }]
                                }
                            ]
                        }
                    ],

                },
                data: [],
                data2: []
            };
        },
        watch:{
            'obj.status'(){
                if(this.obj.status == -1){
                    this.optionView.group[1].column[1].display = true
                }
                else{
                    this.optionView.group[1].column[1].display = false
                    this.obj.refuseReason = ''
                }
            },
          // 'tabActiveName'(val){
          //
          //   if(val == "second"){
          //     this.option.column = this.column2;
          //   }else {
          //     this.option.column = this.column1;
          //   }
          //
          // }


        },
        computed: {
            ...mapGetters(["permission", 'userInfo']),
            permissionList () {
                return {
                    editBtn: this.vaildData(this.permission["/mall-cloud-account/withDrawRecord/editItem"], false)
                };
            },
        },
      methods: {
          //选择地区
          changeArea() {
            //省级选择框
            getAreaListByLevel(this.areaId, 1).then(res => {
              this.cityId="";
              this.citys = res.data.data;
              console.log(this.citys)
            })
          },
            handleClick(tab) {
              console.log(tab)
              if (tab.name == "first") {
                this.page.currentPage=1
                this.$refs['crud'].searchReset();
                this.onLoad(this.page);
              } else if (tab.name == "second") {
                this.page2.currentPage=1
                this.$refs['crud2'].searchReset();
                this.onLoad2(this.page2);
              }
            },
            getTime() {
                if (this.beginOperationTime > this.endOperationTime) {
                    this.$message({
                        type: "error",
                        message: "结束时间不能小于开始时间"
                    });
                    this.endOperationTime = ''
                }
            },


            searchReset () {
                this.query = {};
				this.beginOperationTime = ''
				this.endOperationTime = ''
                this.onLoad(this.page);
            },
            searchChange (params,done) {
                this.page.currentPage=1
                params.beginOperationTime = this.beginOperationTime
                params.endOperationTime = this.endOperationTime
                params.cityId = this.cityId
                console.log(params)
                this.query = params;
                this.onLoad(this.page, params,done);
            },
            currentChange (currentPage) {
                this.page.currentPage = currentPage;
            },
            sizeChange (pageSize) {
                this.page.pageSize = pageSize;
            },
            refreshChange () {
                this.onLoad(this.page);
            },
            onLoad (page, params = {},done) {
                this.loading = true;
                params.type = 1; //店铺申请记录
                getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                    if(done){
                      done();
                    }
                    this.loading = false;
                    const data = res.data;
                    this.page.total = data.count;
                    this.data = data.data;
                });

              //省级选择框
              getAreaListByLevel(null, 0).then(res => {
                this.areas = res.data.data;
              })
            },
        searchReset2 () {
          this.query2 = {};
          this.beginOperationTime = ''
          this.endOperationTime = ''
          this.onLoad2(this.page2);
        },
        searchChange2 (params,done) {
          this.page2.currentPage=1
          params.beginOperationTime = this.beginOperationTime
          params.endOperationTime = this.endOperationTime
          params.cityId = this.cityId
          this.query2 = params;
          this.onLoad2(this.page2, params,done);
        },
        currentChange2 (currentPage) {
          this.page2.currentPage = currentPage;
        },
        sizeChange2 (pageSize) {
          this.page2.pageSize = pageSize;
        },
        refreshChange2 () {
          this.onLoad2(this.page2);
        },
        onLoad2 (page, params = {},done) {
          this.loading2 = true;
          params.type = 2;
          getList(page.currentPage, page.pageSize, Object.assign(params, this.query2)).then(res => {
            if(done){
              done();
            }
            this.loading2 = false;
            const data = res.data;
            this.page2.total = data.count;
            this.data2 = data.data;
          });

          //省级选择框
          getAreaListByLevel(null, 0).then(res => {
            this.areas = res.data.data;
          })
        },
            //打开审核抽屉
            //0，未处理 1，审核通过  2，审核拒绝  3，未打款  4，已完成
            getDetail(row){
                this.loadBtn=false
                if(row.status == 0){
                    this.optionView.group[1].display = true;
                }
                else {
                    this.optionView.group[1].display = false;
                }
                if(row.status == 0){

                   this.optionView.group[0].column[10].display = false;//审核拒绝原因
                }
                else if(row.status == 1){
                  this.optionView.group[0].column[10].display = false;//审核拒绝原因
                }
                else if(row.status == -1){
                  // this.optionView.group[0].column[5].display = true;//审核操作人
                  // this.optionView.group[0].column[7].display = true;//审核拒绝原因
                  // this.optionView.group[0].column[8].display = false;//打款状态
                  // this.optionView.group[0].column[9].display = false;//打款人
                  // this.optionView.group[0].column[10].display = false;//打款时间
                  // this.optionView.group[0].column[11].display = false;//打款备注
                }
              if(row.type == 1){

                this.optionView.group[0].column[8].display = false;//审核操作人
                this.optionView.group[0].column[9].display = false;//审核拒绝原因

                this.optionView.group[0].column[3].display = true;//审核操作人
                this.optionView.group[0].column[4].display = true;//审核拒绝原因
                this.optionView.group[0].column[5].display = true;//审核操作人
                this.optionView.group[0].column[6].display = true;//审核拒绝原因
                this.optionView.group[0].column[7].display = true;//审核操作人
              }
              else {
                this.optionView.group[0].column[3].display = false;//审核操作人
                this.optionView.group[0].column[4].display = false;//审核拒绝原因
                this.optionView.group[0].column[5].display = false;//审核操作人
                this.optionView.group[0].column[6].display = false;//审核拒绝原因
                this.optionView.group[0].column[7].display = false;//审核操作人

                this.optionView.group[0].column[8].display = true;//审核操作人
                this.optionView.group[0].column[9].display = true;//审核拒绝原因
              }



                getDetail(row.id).then(res => {
                    if(res.data.code == 200){
                        this.obj = res.data.data;
                        this.obj.newStatus = res.data.data.status;
                        console.log(this.obj)
                        this.dialogTableVisible = true
                    }else{
                        this.$message({
                            message: res.data.message,
                            type: 'warning'
                        });
                        return;
                    }
                });
            },

            commitCheck(id,status,refuseReason){
                this.loadBtn=true
                if(status == ""){
                  this.$message.error("请点击审核选项");
                  this.loadBtn=false
                  return;
                }
                if(status == -1){
                    if(!refuseReason){
                        this.$message({
                            type: "error",
                            message: "审核拒绝原因不能为空"
                        });
                        this.loadBtn=false
                        return;
                    }
                    else {
                        // var regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im
                        // var  regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
                      var regEn = /[`@#$%^&*()_+<>{},\/;'[\]]/im;
                      var  regCn = /[#￥（——）：；“”‘|《。》？【】[\]]/im;
                        if(regEn.test(refuseReason) || regCn.test(refuseReason)) {
                            this.$message({
                                type: "error",
                                message: "拒绝不能包含特殊字符"
                            });
							this.loadBtn=false
                            return false;
                        }

                        if(refuseReason.length>100){
                        this.$message({
                          type: "error",
                          message: "原因最多输入100个字符"
                        });
                        this.loadBtn=false
                        return;
                      }
                    }
                }
                auditGroupLeader(id,status,refuseReason).then(res => {
                    if(res.data.code == 200){
                        this.dialogTableVisible = false
                        this.$message({
                            type:'success',
                            message:'操作成功!'
                        })
                        this.onLoad(this.page, this.query);
                    }
                    else {
                      this.$message({
                        type: "error",
                        message: res.data.message
                      });
                    }
                });
            },
            cancel(newStatus){
              console.log(this.obj);
              this.dialogTableVisible = false
                this.obj.refuseReason = ''
                this.loadBtn=false
                this.obj.status = newStatus
            },

        }
    };
</script>

<style>
</style>
